<template>
  <div id="NightingaleChart"
       :style="{height: height, width: width}"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "DoughnutChart",
  props: {
    seriesData: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '400px'
    },
  },
  mounted() {
    this.graph = echarts.init(document.getElementById('NightingaleChart'))
    this.graph.clear()
    this.graph.setOption(this.option)
  },
  watch: {
    seriesData() {
      this.graph.clear()
      this.graph.setOption(this.option)
    }
  },
  data() {
    return {
      graph: null,
      option: {
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '7%',
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '25',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.seriesData,
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        }]
      }
    }
  }
}
</script>

<style scoped>
</style>